<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <!-- <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">订单详情</h2>
  </header> -->
  <div class="detail-head-tip mb20">订单{{mainlist.State | orderState}}</div>
  <div class="page">
    <!-- <div class="detail-tip ft14 cf">
      <p class="f-l">订单号：{{bbilllist.BBillNo}}</p>
      <p class="f-r">{{bbilllist.BillDate}}</p>
    </div> -->

    <template v-if="userinfo.UserBizType == 'Driver'">
      <swipeout class="mb20">

        <swipeout-item class="lineb" :threshold=".5" transition-mode="follow" underlay-color="#FFFFFF">
          <div slot="right-menu">
            <swipeout-button style="background-color:#3CB271" @click.native="onGoToNavi('FH')" type="default"><i class="iconfont icon-navi1 ft30"></i></swipeout-button>
            <swipeout-button style="background-color:#ff7202" type="primary"><a :href="'tel:' + mainlist.PickContactsTel" style="color:#fff"><i class="iconfont icon-phone ft30"></i></a></swipeout-button>
          </div>
          <div slot="content" class="form-line2 displayflex mb0">
            <div class="left green">发</div>
            <dl class="ctx flex1">
              <dt>{{mainlist.DepartureProvince | province}}{{mainlist.DepartureCity | city}}{{mainlist.DepartureDistrict | district}}{{mainlist.DepartureAddress}}</dt>
              <dd>{{mainlist.PickContacts}}  {{mainlist.PickContactsTel}} </dd>
            </dl>
          </div>
        </swipeout-item>

        <swipeout-item class="lineb" :threshold=".5" transition-mode="follow" underlay-color="#FFFFFF" v-if="mainlist.StartBusTerminal">
          <div slot="right-menu">
            <swipeout-button style="background-color:#3CB271" @click.native="onGoToNavi('ZZ')" type="default"><i class="iconfont icon-navi1 ft30"></i></swipeout-button>
          </div>
          <div slot="content" class="form-line2 displayflex mb0">
            <div class="left gray">转</div>
            <dl class="ctx flex1">
              <dt>{{mainlist.StartBusTerminal.replace(/\//g, "")}}</dt>
              <dd>&nbsp;</dd>
            </dl>
          </div>
        </swipeout-item>

        <swipeout-item class="lineb" :threshold=".5" transition-mode="follow" underlay-color="#FFFFFF">
          <div slot="right-menu">
            <swipeout-button style="background-color:#3CB271" @click.native="onGoToNavi('SH')" type="default"><i class="iconfont icon-navi1 ft30"></i></swipeout-button>
            <swipeout-button style="background-color:#ff7202" type="primary"><a :href="'tel:' + mainlist.SendContactsTel" style="color:#fff"><i class="iconfont icon-phone ft30"></i></a></swipeout-button>
          </div>
          <div slot="content" class="form-line2 displayflex mb0">
            <div class="left yellow">收</div>
            <dl class="ctx flex1">
              <dt style="word-break:hyphenate;">{{mainlist.ArrivalProvince | province}}{{mainlist.ArrivalCity | city}}{{mainlist.ArrivalDistrict | district}}{{mainlist.ArrivalAddress}}</dt>
              <dd>{{mainlist.SendContacts}}  {{mainlist.SendContactsTel}} </dd>
            </dl>
          </div>
        </swipeout-item>

      </swipeout>
    </template>

    <template v-else>
      <div class="form-line2 displayflex mb0 lineb" @click="map(bbilllist.Guid)">
        <div class="left green">发</div>
        <dl class="ctx flex1">
          <dt>{{mainlist.DepartureProvince | province}}{{mainlist.DepartureCity | city}}{{mainlist.DepartureDistrict | district}}{{mainlist.DepartureAddress}}</dt>
          <dd>{{mainlist.PickContacts}}  {{mainlist.PickContactsTel}} </dd>
        </dl>
        <i class="iconfont icon-right"></i>
      </div>
      <div class="form-line2 displayflex mb0 lineb" @click="map(bbilllist.Guid)" v-if="mainlist.StartBusTerminal">
        <div class="left gray">转</div>
        <dl class="ctx flex1">
          <dt>{{mainlist.StartBusTerminal.replace(/\//g, "")}}</dt>
        </dl>
        <i class="iconfont icon-right"></i>
      </div>
      <div class="form-line2 displayflex" @click="map(bbilllist.Guid)">
        <div class="left yellow">收</div>
        <dl class="ctx flex1">
          <dt>{{mainlist.ArrivalProvince | province}}{{mainlist.ArrivalCity | city}}{{mainlist.ArrivalDistrict | district}}{{mainlist.ArrivalAddress}}</dt>
          <dd>{{mainlist.SendContacts}}  {{mainlist.SendContactsTel}} </dd>
        </dl>
        <i class="iconfont icon-right"></i>
      </div>

    </template>



    <!-- <div class="detail-goods mb20">
      <div class="ft17 tit">商品信息</div>
      <div class="ctx" v-if="goodslist.length > 0">
        <div class="ft17 displayflex detail" v-for="item in goodslist">
          <div class="flex1 goods-unit">
            <p>{{item.GoodsName}}</p>
            <span class="ft14">{{item.GoodsSpec}} {{item.Unit}}</span>
          </div>
          <div class="price"><span class="org">{{item.Pcks}}</span>{{item.Unit}}</div>
        </div>
      </div>
    </div> -->
    <template v-if="mainlist.BusTicketAmount">
      <div class="form-box displayflex">
        <div class="label">购票费</div>
        <div class="ctx flex1 txt-rit org">{{longDistance}}</div>
        <i class="rit">元</i>
      </div>
      <div class="detail-goods mb20">
      <div class="ft17 tit">长途票据</div>
        <ul class="pic-ctx cf">
          <li v-for="(item , index) in BusTicketPic">
            <div class="pic" @click="previewPic5(index)">
              <img :src="item | simpleImgUrl">
            </div>
          </li>
        </ul>
      </div>
      <previewer :list="list5" ref="previewer5"></previewer>
    </template>

    
    <div class="detail-goods mb20">
      <div class="ft17 tit">装箱照片</div>
      <ul class="pic-ctx cf">
        <li v-for="(item , index) in handoverPict">
          <div class="pic" @click="previewPic1(index)">
            <img :src="item | simpleImgUrl">
          </div>
        </li>
      </ul>
    </div>
    <previewer :list="list1" ref="previewer1"></previewer>

    <div class="detail-data mb20 ft14">
      <p class="displayflex">件数<span class="flex1 txt-rit">{{mainlist.OrdersPKGS}}件</span></p>
      <p class="displayflex">重量<span class="flex1 txt-rit">{{mainlist.OrdersWeight}}kg</span></p>
      <p class="displayflex">体积<span class="flex1 txt-rit">{{mainlist.OrdersVolumn}}m³</span></p>
      <p class="displayflex" v-if="ownerTypes.indexOf(userinfo.UserBizType) > -1">运费<span class="flex1 org txt-rit">￥{{mainlist.CarrierAmount}}</span></p>
      <p class="displayflex" v-else>运费<span class="flex1 org txt-rit">￥{{mainlist.DistributionIncome || 0}}</span></p>
    </div>

    <div class="detail-data mb20 ft14" v-if="mainlist.InsuranceAmount > 0 && userinfo.UserBizType != 'Driver'">
      <p class="displayflex">货运险保额<span class="flex1 txt-rit">{{mainlist.InsuranceAmount}}万</span>
      </p>
      <p class="displayflex">货运险保费
        <span class="flex1 txt-rit" v-if="mainlist.InsuranceFee == 0 && userinfo.UserLevel > 0">平台赠送</span>
        <span class="flex1 txt-rit org" v-else-if="mainlist.InsuranceFee > 0">￥{{mainlist.InsuranceFee}}</span>
      </p>
    </div>
    <div class="detail-num mb20 ft14">
      <p>订单编号：{{bbilllist.BBillNo}}</p>
      <p v-if="Tratvehicle">配送员：{{Tratvehicle.Driver1Name}}({{Tratvehicle.Driver1Tel}})</p>
      <p v-if="bbilllist.State=='B01'">是否加急：否</p><p v-if="bbilllist.State=='B05'">是否加急：是</p>
      <p v-if="mainlist.ConsignTime">取货时间：{{mainlist.ConsignTime | timeshort}}</p>
      <p v-if="mainlist.ReceiveTime">签收时间：{{mainlist.ReceiveTime | timeshort}}</p>
      <p v-if="mainlist.LastArrivalArrivedDate" id="arrData">要求到达时间：{{mainlist.LastArrivalArrivedDate | timeshort}}</p>
      <p v-if="mainlist.EndBusTerminal">购票目的地：{{mainlist.EndBusTerminal | noslash}}</p>
    </div>
    <div class="detail-num mb20 ft14">
      <p>备注：{{mainlist.Memo}}</p>
      <p v-if="mainlist.ExcpetionReason">异常原因: {{mainlist.ExcpetionReason}}</p>
    </div>
    <previewer :list="list2" ref="previewer2"></previewer>
    <previewer :list="list3" ref="previewer3"></previewer>
    <previewer :list="list4" ref="previewer4"></previewer>
    <div class="detail-goods mb20" v-if="HandoverPictJJ52.length > 0">
      <div class="ft17 tit">提货凭证</div>
      <ul class="pic-ctx cf">
        <li v-for="(item , index) in HandoverPictJJ52">
          <div class="pic" @click="previewPic2(index)">
            <img :src="item | simpleImgUrl">
          </div>
        </li>
      </ul>
    </div>
    <div class="detail-goods mb20" v-if="HandoverPictJJ56.length > 0 && !edit">
      <div class="ft17 tit">交货凭证</div>
      <ul class="pic-ctx cf">
        <li v-for="(item , index) in HandoverPictJJ56">
          <div class="pic"  @click="previewPic3(index)">
            <img :src="item | simpleImgUrl">
          </div>
        </li>
      </ul>
    </div>
    <div class="detail-goods mb20" v-if="HandoverPictJJ81.length > 0">
      <div class="ft17 tit">签收凭证</div>
      <ul class="pic-ctx cf">
        <li v-for="(item , index) in HandoverPictJJ81">
          <div class="pic"  @click="previewPic4(index)">
            <img :src="item | simpleImgUrl">
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="btn-bottom" v-if="edit"><div class="btn">确认</div></div>
  <!-- <div class="total-footer displayflex">
    <div class="flex1 num">共<span class="org">{{mainlist.OrdersPKGS}}</span>件</div>
    <div class="displayflex">
      <div class="btn btn-sm flex1" v-if="mainlist.State=='11'" @click="onlineOrder(bbilllist.Guid)">修改订单</div>
      <div class="btn btn-sm flex1" v-if="mainlist.State=='12'" @click="driver(bbilllist.Guid)">选择配送员</div>
      <div class="btn btn-sm flex1" v-if="mainlist.State>51">配送详情</div>
      <div class="btn btn-sm flex1"
           v-if="$route.query.step=='1'"
           @click="pickUp">拍照取货</div>
      <div class="btn btn-sm flex1" v-if="$route.query.step=='2'"
           @click="pickUp">交货</div>
    </div>
  </div> -->
  <div style="display:none" id="container"></div>
</div>
</template>

<script>
import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux';
import uploaderImgs from "@/components/share/uploaders.vue";
import {
  iosProvinces,
  iosCitys,
  iosCountys
} from "@/components/share/area/areaData_v2.js";

export default {
  components: {
    uploaderImgs,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  },
  name:'orderDetail',
  data() {
    return {
      bbilllist: [],
      mainlist: [],
      goodslist: [],
      Tratvehicle:[],
      HandOver: [],
      showLoad: true,
      handoverPict: [],
      // HandoverPictJJ: [],
      HandOver52: [],
      HandOver56: [],
      HandOver81: [],
      HandoverPictJJ52: [],
      HandoverPictJJ56: [],
      HandoverPictJJ81: [],
      BusTicketPic: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      ownerTypes : ['Cargowner','Cargoreceiver','warehouse'],
      longDistance:'',//购票费

      addrCoord:[], //导航的坐标点
    };
  },
  created() {
    this.getData();
  },
  computed: {
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
    edit(){
      return this.$route.query.edit?true:false
    }
  },
  methods: {
    previewPic1: function(index) {
      this.$refs.previewer1.show(index);
    },
    previewPic2: function(index) {
      this.$refs.previewer2.show(index);
    },
    previewPic3: function(index) {
      this.$refs.previewer3.show(index);
    },
    previewPic4: function(index) {
      this.$refs.previewer4.show(index);
    },
    previewPic5: function(index) {
      this.$refs.previewer5.show(index);
    },
    // goBack() {
    //   this.$router.go(-1);
    // },
    // driver(guid) {
    //   this.$router.push({
    //     path: "/driverList",
    //     query: { id: guid }
    //   });
    // },
    map(guid) {
      this.$router.push({
        path: "/map",
        query: { id: guid }
      });
    },
    getData() {
      var guid = this.$route.query.id;
      var self = this;
      var query = {
        Guid: guid
      };
      this.Ajax.post("GetOrderDetail", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.bbilllist = resp.Data.Bill;
          self.mainlist = resp.Data.Main;
          self.goodslist = resp.Data.BbDetial;
          self.Tratvehicle =resp.Data.Tratvehicle;
          self.HandOver = resp.Data.HandOver;
          self.HandOver52 = resp.Data.HandOver52;
          self.HandOver56 = resp.Data.HandOver56;
          self.HandOver81 = resp.Data.HandOver81;

          if(self.mainlist.BusTicketAmount)
          {
            self.longDistance = self.mainlist.BusTicketAmount.toFixed(2);
          }
          
          if(self.mainlist.BusTicketPic)
          {
            self.BusTicketPic = JSON.parse(self.mainlist.BusTicketPic);
            //重组list
            for (var i = 0; i < self.BusTicketPic.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.BusTicketPic[i]
              };
              self.list5.push(value);
            }
          }

          if (self.mainlist.PictContentPkg) {
            self.handoverPict = JSON.parse(self.mainlist.PictContentPkg);
            //重组list
            for (var i = 0; i < self.handoverPict.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.handoverPict[i]
              };
              self.list1.push(value);
            }
          }
          // if (self.HandOver && self.HandOver.HandoverPict) {
          //   self.HandoverPictJJ = JSON.parse(self.HandOver.HandoverPict);
          // }

          if (resp.Data.HandOver52 && self.HandOver52.HandoverPict) {
            self.HandoverPictJJ52 = JSON.parse(self.HandOver52.HandoverPict);
            //重组list
            for (var i = 0; i < self.HandoverPictJJ52.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.HandoverPictJJ52[i]
              };
              self.list2.push(value);
            }
          }
          if (resp.Data.HandOver56 && self.HandOver56.HandoverPict) {
            self.HandoverPictJJ56 = JSON.parse(self.HandOver56.HandoverPict);
            //重组list
            for (var i = 0; i < self.HandoverPictJJ56.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.HandoverPictJJ56[i]
              };
              self.list3.push(value);
            }
          }
          if (resp.Data.HandOver81 && self.HandOver81.HandoverPict) {
            self.HandoverPictJJ81 = JSON.parse(self.HandOver81.HandoverPict);
            //重组list
            for (var i = 0; i < self.HandoverPictJJ81.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.HandoverPictJJ81[i]
              };
              self.list4.push(value);
            }
          }
        }
      });
    },
    onGoToNavi(type){
      var map = new AMap.Map("container"),
          addressCode = [],
          data = this.mainlist,
          self = this;

      switch(type)
      {
        case 'FH':
          addressCode.push(data.DepartureProvince, data.DepartureCity, data.DepartureDistrict, data.DepartureAddress)
          break;

        case 'ZZ':
          var zz = data.StartBusTerminal.split("/");
          addressCode.push(zz[0], zz[1], zz[2], zz[3])
          break;

        case 'SH':
          addressCode.push(data.ArrivalProvince, data.ArrivalCity, data.ArrivalDistrict, data.ArrivalAddress)
          break;
      }

      this.decodeAddress(addressCode).then((ret) => {
        if(ret.length > 0)
        {
          this.addrCoord = ret;
          openLocation();
        }
      });
        
      function openLocation(){
        var wxLocation = {
          name: addressCode[3], //目的地名称
          address: self.province(addressCode[0]) + self.city(addressCode[1]) + self.district(addressCode[2]) + addressCode[3], //目的地地址
          infoUrl: location.protocol + '//' + location.host + '/#/map?id=' + self.bbilllist.Guid, //底部链接
          longitude : self.addrCoord[0], // 经度，浮点数，范围为180 ~ -180。
          latitude : self.addrCoord[1], // 纬度，浮点数，范围为90 ~ -90
        };
        console.log(wxLocation)
        self.jWeixin.openLocation({
          latitude: wxLocation.latitude, // 纬度，浮点数，范围为90 ~ -90
          longitude: wxLocation.longitude, // 经度，浮点数，范围为180 ~ -180。
          name: wxLocation.name, // 位置名
          address: wxLocation.address, // 地址详情说明
          scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: wxLocation.infoUrl // 在查看位置界面底部显示的超链接,可点击跳转
        });
      }
    },
    decodeAddress(addr) {
      return new Promise((resolve, reject) => {
        var self = this;
        var geocoder = null;
        var map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 10,
          center: [116.480983, 40.0958] //经纬度值
        });
        var addressText = self.province(addr[0]) + self.city(addr[1]) + self.district(addr[2]) + addr[3]
        map.plugin("AMap.Geocoder", function() {
          geocoder = new AMap.Geocoder({ });
          geocoder.getLocation(addressText, function(status, result) {
            if (status === "complete" && result.info === "OK") {
              var lng = result.geocodes[0].location.lng,
                  lat = result.geocodes[0].location.lat,
                  addrCoord = [];
              if(lng && lat){
                addrCoord.push(lng, lat);
                resolve(addrCoord);
              } else {
                console.log("获取经纬度失败1");
                reject("获取经纬度失败1");
              }
            } else {
              console.log("获取经纬度失败2");
              reject("获取经纬度失败2");
            }
          });
        });
      });
    },
    province(val) {
      var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
      if (reg.test(val)) {
        return val;
      }
      if (val && val != null && val != "undefined") {
        for (var i = 0; i < iosProvinces.length; i++) {
          if (iosProvinces[i].id == val) {
            return iosProvinces[i].value;
          }
        }
      }
    },
    city(val) {
      var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
      if (reg.test(val)) {
        return val;
      }
      if (val && val != null && val != "undefined") {
        for (var i = 0; i < iosCitys.length; i++) {
          if (iosCitys[i].id == val) {
            return iosCitys[i].value;
          }
        }
      }
    },
    district(val) {
      var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
      if (reg.test(val)) {
        return val;
      }
      if (val && val != null && val != "undefined") {
        for (var i = 0; i < iosCountys.length; i++) {
          if (iosCountys[i].id == val) {
            return iosCountys[i].value;
          }
        }
      }
    },
    // pickUp() {
    //   //提货，交货跳转
    //   this.$router.push({
    //     path: "/pickUp",
    //     query: {
    //       step: this.$route.query.step
    //     }
    //   });
    // },
    // onlineOrder(guid) {
    //   //修改订单
    //   this.$router.push({
    //     path: "/onlineOrder",
    //     query: { id: guid, type: "1" }
    //   });
    // }
  }
};
</script>